// 用户列表
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {withRouter} from 'react-router-dom';
import {Drawer, Button, Input, Form, Checkbox, Select} from 'antd';
import PropTypes from 'prop-types';
import {addUser, editUser} from '../../api';
import userAction from '../../store/actions/userList';
import roleAction from '../../store/actions/roleList';


import './Header.scss';
import Header from './UserList';

const {Option} = Select;
const CheckboxGroup = Checkbox.Group;

class CodeHeader extends Component {

  state = {
    disabled: false
  };

  static propTypes = {
    visible: PropTypes.bool,
    showDrawer: PropTypes.func,
    onClose: PropTypes.func,
    data: PropTypes.object
  };

  handleOk = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log(this.props);
        const {data} = this.props;
        const isEdit = data.hasOwnProperty('username');
        console.log(data);
        if (isEdit) {
          // 编辑
          let postData = {
            id: data.id,
            ...values
          };
          editUser(postData).then(res => {
            console.log(res);
            this.props.GET_USER_LIST();
            this.props.form.resetFields();
            this.props.onClose();
          }).catch(err => {
            console.log(err);
          });
        } else {
          // 增加
          addUser(values).then(res => {
            console.log(res);
            this.props.GET_USER_LIST();
            this.props.form.resetFields();
            this.props.onClose();
          }).catch(err => {
            console.log(err);
          });
        }

      }
    });
  };

  componentDidMount() {
    this.props.GET_ROLE_LIST();
    this.setState({
      disabled: this.props.data.hasOwnProperty('username')
    });
  }

  tempOnClose = () => {
    this.props.onClose();
    this.props.form.resetFields();
  };

  render() {
    const {getFieldDecorator} = this.props.form;
    const {showDrawer, data, roleListData} = this.props;
    return (
      <>
        <div className='MaterialGroup__head'>
          <h3>用户列表</h3>
          <Button type="primary" onClick={showDrawer}> 增 加</Button>
        </div>
        {/*抽屉开始*/}
        <Drawer
          width={500}
          title="用户信息"
          placement="right"
          closable={true}
          onClose={this.tempOnClose}
          visible={this.props.visible}
        >


          <Form className="drawer-form" onSubmit={this.handleOk}>

            <Form.Item label="所属角色" hasFeedback>
              {getFieldDecorator('user_group_id', {
                initialValue: data.user_group_id || [],
                rules: [{required: true, message: '请选择所属角色...'}]
              })(
                <Select placeholder="所属角色">
                  {
                    roleListData && roleListData.map(item => {
                      return (
                        <Option value={item.group_id} key={item.group_id}>
                          {item.group_name}
                        </Option>
                      );
                    })
                  }

                </Select>
              )}
            </Form.Item>

            <Form.Item label="用户名称">
              {getFieldDecorator('username', {
                initialValue: data.username || '',
                rules: [{
                  required: true,
                  message: '请填写用户名称...'
                }]
              })(
                <Input placeholder='用户名称'/>
              )}
            </Form.Item>
            <Form.Item label="用户密码">
              {getFieldDecorator('password', {
                initialValue: data.password || ''
                // rules: [{
                //   required: true,
                //   message: '请填写用户密码...'
                // }],
              })(
                <Input placeholder='用户密码'/>
              )}
            </Form.Item>
            <Form.Item label="电话号码">
              {getFieldDecorator('phone', {
                initialValue: data.phone || ''
                // rules: [{
                //   required: true,
                //   message: "请填写电话号码..."
                // }]
              })(
                <Input placeholder='电话号码'/>
              )}
            </Form.Item>
            <Form.Item label="常用邮箱">
              {getFieldDecorator('mail', {
                initialValue: data.mail || ''
                // rules: [{
                //   required: true,
                //   message: '请填写常用邮箱...'
                // }],
              })(
                <Input placeholder='常用邮箱'/>
              )}
            </Form.Item>

            <Form.Item>
              <div id='drawer-form-buttons'>
                <Button type="primary" className="drawer-form-button" onClick={this.tempOnClose}>取 消</Button>
                <Button type="danger" className="rawer-form-button" onClick={this.handleOk}>确 定</Button>
              </div>
            </Form.Item>

          </Form>
        </Drawer>
        {/*抽屉结束*/}
      </>
    );
  }

}

const mapStateToProps = state => {
  return {
    ...state.roleList,
    ...state.userList
  };
};
const WrappedNormalLoginForm = Form.create()(CodeHeader);
export default connect(mapStateToProps, {...roleAction, ...userAction})(withRouter(WrappedNormalLoginForm));
